<template>
  <div class="equipment-detail-container">
    <!-- 顶部标题 -->
    <!-- <div class="detail-header">
      <div class="header-title">
        <dv-decoration-7 style="width:200px;height:40px;">
          <span style="color:#fff;font-size:18px;">设备详情</span>
        </dv-decoration-7>
      </div>
    </div> -->

    <div class="detail-content">

      <!-- 左侧基础信息 -->
      <div class="left-panel">
        <!-- 基础信息卡片 -->
        <el-card class="info-card tech-card">
          <dv-border-box-11 title="设备基础信息"   style="padding: 20px;padding-top: 80px;">
          <div class="info-grid">
            <div class="info-item">
              <label>设备名称：</label>
              <span class="info-value">{{ detailData.name }}</span>
            </div>
            <div class="info-item">
              <label>所属客户：</label>
              <span class="info-value">{{ detailData.user }}</span>
            </div>
            <div class="info-item">
              <label>所属项目：</label>
              <span class="info-value" v-if="detailData.project">{{ detailData.project.title  || ''}}</span>
            </div>
            <div class="info-item">
              <label>设备类型：</label>
              <span class="info-value" v-if="detailData.cate">{{ detailData.cate.name || '' }}</span>
            </div>
            <div class="info-item full-width">
              <label>设备位置：</label>
              <span class="info-value">{{ detailData.province }}-{{ detailData.city }}-{{ detailData.area }}-{{ detailData.address }}</span>
            </div>
            <div class="info-item">
              <label>设备编码：</label>
              <span class="info-value code">{{ detailData.code }}</span>
            </div>
            <div class="info-item">
              <label>绑定时间：</label>
              <span class="info-value">{{ detailData.bindTime }}</span>
            </div>
            <div class="info-item">
              <label>设备状态：</label>
              <span class="status-badge" :class="`status-${detailData.status}`">
                {{ detailData.status_text }}
              </span>
            </div>
            <div class="info-item">
              <label>巡检状态：</label>
              <span class="status-badge inspection-status">
                {{ detailData.inspectionStatus }}
              </span>
            </div>
            <div class="info-item">
              <label>ICCID：</label>
              <span class="info-value">{{ detailData.iccid }}</span>
            </div>
            <div class="info-item">
              <label>温度：</label>
              <span class="info-value temperature">{{ detailData.temperature }}</span>
            </div>
            <div class="info-item">
              <label>外设设备：</label>
              <span class="info-value">{{ detailData.peripheral_devices }}</span>
            </div>
            <div class="info-item">
              <label>外设状态：</label>
              <span class="status-badge peripheral-status">
                {{ detailData.peripheralStatus }}
              </span>
            </div>
            <div class="info-item">
              <label>电池容量：</label>
              <span class="info-value">{{ detailData.battery }}</span>
            </div>
            <div class="info-item">
              <label>信号强度：</label>
              <span class="info-value signal">{{ detailData.signal }}</span>
            </div>
            <div class="info-item">
              <label>设备导入：</label>
              <span class="info-value">{{ detailData.importType }}</span>
            </div>
            <div class="info-item">
              <label>购买时间：</label>
              <span class="info-value">{{ detailData.purchaseTime }}</span>
            </div>
            <div class="info-item">
              <label>安装时间：</label>
              <span class="info-value">{{ detailData.bind_time }}</span>
            </div>
            <div class="info-item">
              <label>过期时间：</label>
              <span class="info-value expire-time">{{ detailData.expireTime }}</span>
            </div>
          </div>
          <div class="photo-section">
            <label>现场照片：</label>
            <div class="photo-grid">
              <div v-for="(photo, index) in detailData.photos" :key="index" class="photo-item">
                <el-image 
                  :src="photo" 
                  fit="cover"
                  :preview-src-list="detailData.photos"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
            </div>
          </div>
          </dv-border-box-11>
        </el-card>

              <!-- 统计概览 -->
        <el-card class="stats-card tech-card">
          <dv-border-box-11 title="设备统计概览"   style="padding: 20px;padding-top: 80px;">
            <div class="stats-overview">
            <div class="stat-item">
              <div class="stat-icon fire-alarm">
                <i class="el-icon-warning"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ stats.fireAlarmCount }}</div>
                <div class="stat-label">火警数量</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon fault">
                <i class="el-icon-error"></i>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ stats.faultCount }}</div>
                <div class="stat-label">故障数量</div>
              </div>
            </div>
          </div>
          </dv-border-box-11>
        </el-card>

        <!-- 设备实时状态 -->
        <el-card class="realtime-card tech-card">
          <dv-border-box-11 title="设备实时状态" style="padding: 20px;padding-top: 80px;position: relative;">
            <!-- 下载区域 -->
             <div style="text-align: right;">
              <el-button 
                class="download-btn"
                type="primary" 
                size="mini" 
                icon="el-icon-download"
              >
                下载报表
              </el-button>
             </div>
            <el-table
              :data="realtimeStatus"
              style="width: 100%"
              class="tech-table"
              :header-cell-style="headerStyle"
            >
              <el-table-column prop="index" label="序号" width="60" align="center"></el-table-column>
              <el-table-column prop="time" label="时间" width="180" align="center"></el-table-column>
              <el-table-column prop="status" label="实时状态" align="center">
                <template slot-scope="scope">
                  <span class="status-tag" :class="getStatusClass(scope.row.status)">
                    {{ scope.row.status }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
            <div style="padding: 5px;font-size: 12px;text-align: right;margin-top: 10px;">当前列表只显示最新的10条，如需查看更多请下载报表查看</div>
          </dv-border-box-11>
         
        </el-card>
      </div>

      <!-- 右侧统计信息 -->
      <div class="right-panel">

        <!-- 历史事件比例 -->
        <el-card class="chart-card tech-card">
          <dv-border-box-11 title="历史事件比例"   style="padding: 20px;padding-top: 80px;">
            <div id="eventPieChart" style="width:100%;height:300px;"></div>
          </dv-border-box-11>
          
        </el-card>

        <!-- 近五年事件统计 -->
        <el-card class="chart-card tech-card">
          <dv-border-box-11 title="近五年事件统计"   style="padding: 20px;padding-top: 80px;">
            <div id="yearlyChart" style="width:100%;height:300px;"></div>
          </dv-border-box-11>
        </el-card>

        <!-- 设备巡检状态 -->
        <el-card class="inspection-card tech-card">
          <dv-border-box-11 title="设备巡检状态"   style="padding: 20px;padding-top: 80px;">
             <el-table
            :data="inspectionData"
            style="width: 100%"
            class="tech-table"
            :header-cell-style="headerStyle"
          >
            <el-table-column prop="time" label="巡检时间" width="180" align="center"></el-table-column>
            <el-table-column prop="position" label="设备位置" align="center"></el-table-column>
            <el-table-column prop="status" label="巡检状态" align="center">
              <template slot-scope="scope">
                <span class="status-tag" :class="getInspectionClass(scope.row.status)">
                  {{ scope.row.status }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="maintainer" label="维保责任人" align="center"></el-table-column>
            <el-table-column prop="maintainerPhone" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="userContact" label="使用方责任人" align="center"></el-table-column>
            <el-table-column prop="userPhone" label="电话" align="center"></el-table-column>
             </el-table>
          </dv-border-box-11>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { list, detail, del,edit,equipment_switch } from '@/api/equipments' // api接口
export default {
  name: 'EquipmentDetail',
  data() {
    return {
      detailData: {
        id:null,
        name: '380燃气',
        user: '湖北楚宜天正消防',
        project: '展厅',
        type: '燃气探测器380',
        location: '湖北省宜昌市伍家岗区伍家乡展厅',
        code: '380868733061097785',
        bindTime: '2024-12-02 19:15:36',
        status: 1,
        statusText: '在线',
        inspectionStatus: '未检查',
        iccid: '89861122221007730983',
        temperature: '27.2℃',
        peripheral: '机械臂',
        peripheralStatus: '打开',
        battery: '85%',
        signal: '强',
        importType: '用户导入',
        purchaseTime: '2024-01-15',
        installTime: '2024-01-20',
        expireTime: '2026-01-20',
        photos: [
          'https://via.placeholder.com/150',
          'https://via.placeholder.com/150'
        ]
      },
      realtimeStatus: [
        { index: 1, time: '2024-12-02 19:15:36', status: '在线' },
        { index: 2, time: '2024-12-02 18:15:36', status: '在线' },
        { index: 3, time: '2024-12-02 17:15:36', status: '异常' },
        { index: 4, time: '2024-12-02 16:15:36', status: '在线' }
      ],
      stats: {
        fireAlarmCount: 12,
        faultCount: 5
      },
      inspectionData: [
        {
          time: '2024-12-02 10:00:00',
          position: '展厅东侧',
          status: '正常',
          maintainer: '张三',
          maintainerPhone: '13800138000',
          userContact: '李四',
          userPhone: '13900139000'
        },
        {
          time: '2024-11-28 14:30:00',
          position: '展厅西侧',
          status: '待维修',
          maintainer: '王五',
          maintainerPhone: '13700137000',
          userContact: '赵六',
          userPhone: '13600136000'
        }
      ],
      eventPieChart: null,
      yearlyChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.$nextTick(() => {
      window.addEventListener('resize', this.handleResize)
    })
  },
  beforeDestroy() {
    if (this.eventPieChart) {
      this.eventPieChart.dispose()
    }
    if (this.yearlyChart) {
      this.yearlyChart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  created() {
    // 获取ID参数
    this.detailData.id = this.$route.query.id
    this.fetchEquipmentDetail(this.detailData.id)
  },
  methods: {
    fetchEquipmentDetail(id){
      detail(id).then(res=>{
         this.detailData = res.data
      })
    },
    headerStyle() {
      return {
        background: 'linear-gradient(135deg, #1e3c72, #2a5298)',
        color: '#fff',
        fontWeight: 'bold',
        border: 'none'
      }
    },
    getStatusClass(status) {
      const classMap = {
        '在线': 'status-online',
        '离线': 'status-offline',
        '异常': 'status-warning',
        '报警': 'status-alarm',
        '故障': 'status-fault'
      }
      return classMap[status] || ''
    },
    getInspectionClass(status) {
      const classMap = {
        '正常': 'inspection-normal',
        '待维修': 'inspection-warning',
        '维修中': 'inspection-processing',
        '未检查': 'inspection-pending'
      }
      return classMap[status] || ''
    },
    initCharts() {
      this.initEventPieChart()
      this.initYearlyChart()
    },
    initEventPieChart() {
      const chartDom = document.getElementById('eventPieChart')
      this.eventPieChart = echarts.init(chartDom)
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '事件类型',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#102542',
              borderWidth: 2
            },
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 40, name: '正常', itemStyle: { color: '#67c23a' } },
              { value: 30, name: '火警', itemStyle: { color: '#e6a23c' } },
              { value: 20, name: '故障', itemStyle: { color: '#f56c6c' } },
              { value: 10, name: '离线', itemStyle: { color: '#909399' } }
            ]
          }
        ]
      }
      
      this.eventPieChart.setOption(option)
    },
    initYearlyChart() {
      const chartDom = document.getElementById('yearlyChart')
      this.yearlyChart = echarts.init(chartDom)
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['火警数量', '故障数量'],
          textStyle: {
            color: '#fff'
          },
          right: 10,
          top: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2020', '2021', '2022', '2023', '2024'],
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          }
        },
        series: [
          {
            name: '火警数量',
            type: 'bar',
            barWidth: '30%',
            data: [5, 8, 12, 15, 12],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ffd666' },
                { offset: 1, color: '#e6a23c' }
              ])
            }
          },
          {
            name: '故障数量',
            type: 'bar',
            barWidth: '30%',
            data: [3, 5, 8, 10, 5],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff9f7f' },
                { offset: 1, color: '#f56c6c' }
              ])
            }
          }
        ]
      }
      
      this.yearlyChart.setOption(option)
    },
    handleResize() {
      if (this.eventPieChart) {
        this.eventPieChart.resize()
      }
      if (this.yearlyChart) {
        this.yearlyChart.resize()
      }
    }
  }
}
</script>
<style scoped>
.equipment-detail-container {
  background: #102542;
  min-height: 100vh;
  padding: 20px;
  color: #fff;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header-title {
  flex: 1;
  text-align: center;
}

.detail-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tech-card {
  background: rgba(16, 37, 66, 0.8);
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.tech-card ::v-deep .el-card__header {
  background: linear-gradient(135deg, rgba(30, 60, 114, 0.8), rgba(42, 82, 152, 0.8));
  border-bottom: 1px solid rgba(64, 158, 255, 0.3);
  padding: 12px 20px;
}

.card-header {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
}

.card-header i {
  margin-right: 8px;
  color: #409eff;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-item label {
  color: #a0a0a0;
  font-size: 14px;
  min-width: 100px;
  margin-right: 8px;
}

.info-value {
  color: #fff;
  font-weight: 500;
}

.info-value.code,
.info-value.temperature,
.info-value.signal,
.info-value.expire-time {
  color: #409eff;
  font-weight: bold;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.status-1 {
  background: linear-gradient(135deg, #67c23a, #529b2e);
  color: white;
}

.inspection-status {
  background: linear-gradient(135deg, #e6a23c, #d48220);
  color: white;
}

.peripheral-status {
  background: linear-gradient(135deg, #409eff, #3375b9);
  color: white;
}

.photo-section {
  margin-top: 20px;
}

.photo-section label {
  color: #a0a0a0;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.photo-grid {
  display: flex;
  gap: 10px;
}

.photo-item {
  width: 100px;
  height: 100px;
  border: 1px solid rgba(64, 158, 255, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}

.tech-table ::v-deep .el-table {
  background: transparent;
  color: #fff;
}

.tech-table ::v-deep .el-table th {
  background: linear-gradient(135deg, #1e3c72, #2a5298) !important;
  color: #fff;
  border: none;
}

.tech-table ::v-deep .el-table tr {
  background: rgba(255, 255, 255, 0.05);
}

.tech-table ::v-deep .el-table td {
  border-bottom: 1px solid rgba(64, 158, 255, 0.1);
  color: #fff;
}

.tech-table ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
  background: rgba(64, 158, 255, 0.1);
}

.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
}

.status-online {
  background: #67c23a;
  color: white;
}

.status-offline {
  background: #909399;
  color: white;
}

.status-warning {
  background: #e6a23c;
  color: white;
}

.status-alarm {
  background: #f56c6c;
  color: white;
  animation: pulse 2s infinite;
}

.status-fault {
  background: #c00000;
  color: white;
}

.inspection-normal {
  background: #67c23a;
  color: white;
}

.inspection-warning {
  background: #e6a23c;
  color: white;
}

.inspection-processing {
  background: #409eff;
  color: white;
}

.inspection-pending {
  background: #909399;
  color: white;
}

.stats-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(64, 158, 255, 0.2);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 24px;
  color: white;
}

.stat-icon.fire-alarm {
  background: linear-gradient(135deg, #e6a23c, #d48220);
}

.stat-icon.fault {
  background: linear-gradient(135deg, #f56c6c, #d63031);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #a0a0a0;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .detail-content {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>